LAPORAN TUGAS MATA KULIAH
METODOLOGI DESAIN PERANGKAT LUNAK PRAKTIK
Dosen : Irma Handayani, S.Kom., M.Cs.
Studi Kasus
PERANCANGAN APLIKASI MENGGAMBAR ONLINE BERBASIS WEB
MENGGUNAKAN METODE DEVOPS
Oleh :
5200411122 Gressensia Olivia Neno Aumenu
5200411144 Bella Primin
5200411202 Berliana 'Isyatin Rodhiyah
5200411226 Ade Lia Saputri
5200411236 Lili Christi
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS TEKNOLOGI YOGYAKARTA
BAB I
PENDAHULUAN
1.1 Latar Belakang
Menggambar adalah salah satu cara untuk mengekspresikan perasaan melalui goresan pena.
Untuk mengekspresikan diri, biasanya anak kecil akan suka mencoret-coret kertas.
Dikarenakan kebiasaan mencoret itu, banyak kertas yang terbuang dan tidak bisa dipakai lagi.
Apalagi penggunaan kertas dalam kehidupan semakin bertambah. Banyaknya konsumsi kertas
tentu saja dapat mempengaruhi tingkat penebangan pohon.
Selain kertas, banyak pula benda benda yang rusak, juga banyak dinding yang kotor akibat
coretan para anak kecil. Kerusakan yang ditimbulkan akan membutuhkan lebih banyak budget
untuk memperbaikinya. Selanjutnya, penggunaan pensil, pensil warna, krayon, ataupun cat,
belum terlalu perlu hanya untuk bermain anak-anak, karna akan menambah budget yang
dibutukan untuk itu.
Berawal dari adanya keluhan para orangtua kepada Perusahaan BimBel Bumi karena sistem
menggambar yang manual, jadi banyak media serta bahan yang harus dikumpulkan, untuk itu
kami melakukan sebuah pembuatan rancangan aplikasi menggambar berbasis web untuk
Bimbingan Belajar Bumi. Dengan mendaftarkan anaknya menggunakan aplikasi ini, para guru
juga dapat memantau perekembangan seni para murid.
Dalam aplikasi menggambar online ini dapat membantu meminimalisir penggunaan kertas
sebagai media serta dapat mengurangi budget yang akan dikeluarkan untuk anak-anak
menggambar. Selain itu, aplikasi ini akan membantu anak-anak untuk belajar menggambar.
Hal ini sangat mempermudah proses menggambar dalam media dan bidang yang ada.
Sistem ini akan mengolah data user, data admin dan data gambar dengan menggunakan
MySQL. Sistem ini dibangun dengan menggunakan bahasa pemrograman PHP, HTML,
JavaScript, dan CSS. Hasil dari penelitian ini sistem dapat membantu proses penggambaran
dengan adanya system yang efisien dan lebih fleksibel.
1.2 Batasan Masalah
Berdasarkan dari identifikasi masalah tersebut, kami membatasi masalah hanya pada:
a. Pengguna aplikasi adalah para guru dan murid di Bimbingan Belajar Bumi.
b. Pendaftaran user dilakukan oleh admin, yang selaku guru dari user.
c. Alat menggambar yang digunakan hanya berupa garis dan warna.
d. Tampilan menggambar berupa kanvas, volume garis, dan pilihan warna.
e. Gambar dapat disimpan, diubah, dan dihapus.
1.3 Rumusan Masalah
Mengenai rumusan masalah yang akan dibahas, berdasarkan konteks masalah yang diuraikan
di atas, khususnya yaitu:
a. Bagaimana cara membuat aplikasi menggambar berbasis web.
b. Bagaimana merancang dan membangun aplikasi menggambar yang mudah digunakan untuk
anak-anak.
1.4 Tujuan Penelitian
Tujuan dilakukanya penelitian ini yaitu:
a) Menghasilkan sebuah aplikasi menggambar untuk anak-anak.
b) Menghasilkan aplikasi menggambar yang dapat dengan mudah digunakan.
1.5 Manfaat Penelitian
Berikut adalah manfaan dari dilakukanya penelitian ini adalah :
a) Mepermudah anak-anak untuk dapat menggambar dan mewarnai.
b) Mengurangi penggunaan kertas
c) Mengurangi penggunaan budget untuk menggambar.
BAB II
LANDASAN TEORI
2.1 Definisi Menggambar
Secara umum pengertian menggambar adalah kegiatan menorehkan pensil ataupun
pewarna di atas media kertas. Sedangkan pengertian secara khusus, menggambar adalah
kegiatan-kegiatan membentuk imaji, dengan menggunakan banyak pilihan teknik dan alat
dengan membuat tanda-tanda tertentu di atas permukaan media dengan mengolah goresan dari
alat gambar. Gambar merupakan karya seni rupa dua dimensi yang berfungsi untuk untuk
menerangkan ataupun menjelaskan sesuatu.
2.2 Sistem Menggambar
Menggambar adalah kegiatan membentuk citra dengan menggunakan banyak pilihan
teknik dan alat. Dengan membuat tanda-tanda tertentu di atas permukaan dan mengolah
goresan dari alat gambar. Kebanyakan karya menggambar adalah representasi dari ingatan atau
imajinasi seorang juru gambar.
2.3 HTML
HTML adalah bahasa standar pemrogaman yang digunakan untuk membuat halaman
website, yang diakses melalui internet. Singkatan dari "Hypertext Markup Language" atau
"bahasa markup". HTML disusun berdasar kode dan simbol tertentu, yang dimasukkan dalam
sebuah file atau dokumen. Sehingga bisa ditampilkan pada layar komputer. Dan bisa dipahami
oleh para pengguna internet.
Memahami setiap kata yang terkandung, hypertext sendiri dimaksudkan sebagai metode
yang digunakan untuk berpindah laman web ke laman lain. Usai mengklik tulisan atau simbol
yang muncul di halaman website.
Lalu istilah markup, diartikan sebagai suatu hal yang dilakukan tag HTML terhadap teks
didalamnya. Contoh jika mengetik suatu teks dengan tanda tag . Maka teks tersebut akan
muncul dengan huruf tebal atau bold di laman website.
2.4 CSS
CSS adalah kepanjangaan dari Cascading Style Sheets yang berguna untuk
menyederhanakan proses pembuatan website dengan mengatur elemen yang tertulis di bahasa
markup.CSS dipakai untuk mendesain halaman depan atau tampilan website. CSS menangani
tampilan dan ‘rasa’ dari halaman website.
Ada banyak hal yang dapat Anda lakukan menggunakan CSS dibandingkan dengan
bahasa pemrograman inti seperti HTML dan PHP. Ketika menggunakan CSS, Anda dapat
mengatur warna teks, jenis font, baris antar paragraf, ukuran kolom, dan jenis background yang
dipakai.Tidak hanya itu CSS juga bisa untuk mendesain layout, variasi tampilan di berbagai
perangkat yang berbeda, dan berbagai efek yang dipakai di dalam website.
CSS sangat mudah dipelajari, tapi juga powerful karena dapat mengontrol penyajian
tampilan dari dokumen HTML. Mulai dari yang simpel sampai kompleks. Tidak heran jika saat
ini CSS hampir dipakai di berbagai website untuk dikombinasikan dengan HTML maupun
PHP.
2.5 JAVASCRIPT
JavaScript adalah bahasa pemrograman populer yang digunakan untuk membuat situs
dengan konten website yang dinamis. Konten dinamis artinya konten dapat bergerak atau
berubah di depan layar tanpa perlu mereload halaman. Misalnya saja, fitur slideshow foto,
gambar animasi, pengisian poling, dan lainnya.
JavaScript sendiri sebenarnya biasanya dikolaborasikan dengan HTML dan CSS. Di
mana HTML digunakan untuk membuat struktur website dan CSS untuk merancang style
halaman website. Lalu, JavaScript berperan menambahkan elemen interaktif untuk
meningkatkan engagement pengguna.
2.6 Data Flow Diagram
DFD adalah suatu diagram yang menggambarkan aliran data dari sebuah proses yang
sering disebut dengan sistem informasi. Di dalam data flow diagram juga menyediakan
informasi mengenai input dan output dari tiap entitas dan proses itu sendiri.
Dalam diagram alir data juga tidak mempunyai kontrol terhadap flow -nya, sehingga
tidak adanya aturan terkait keputusan atau pengulangan. Bentuk penggambaran berupa
data flowchart dengan skema yang lebih spesifik. Menurut Kenneth Kozar, tujuan dari adanya
DFD sendiri adalah sebagai penyedia atau menjembatani antara pengguna dengan sistem.
Data flow diagram berbeda dengan UML (Unified Modelling Language), dimana hal
mendasar yang menjadi pembeda antara kedua skema tersebut terletak
pada flow dan objective penyampaian informasi di dalamnya.
2.7 Eternity Relationship Diagram (ERD)
ERD adalah pemodelan data atau sistem dalam database yang sudah sering digunakan
oleh banyak lembaga. Fungsinya ERD adalah untuk memodelkan struktur dan hubungan antar
data yang relatif kompleks. Keberadaan sistem ERD sangat penting untuk perusahaan dalam
mengelola data yang dimilikinya.Bentuknya seperti diagram yang menjelaskan hubungan antar
objek data.
Bentuknya seperti diagram yang menjelaskan hubungan antar objek data. Untuk
menggambarkannya dibutuhkan:
Notasi ialah seperangkat lambang yang menggambarkan data
Simbol sebagai lambang sebagai penanda
Bagan merupakan rancangan atau skema untuk mempermudah penafsiran dan lain
sebagainya.
2.8 Metode DevOps
DevOps merupakan singkatan dari dua kata yaitu Development dan Operation. Di mana
kedua kata tersebut bermakna menggabungkan proses development/pengembangan dari
sebuah sistem/aplikasi dengan operation/operasional. Seperti yang disebutkan sebelumnya,
DevOps adalah sebuah prinsip developer untuk mengkoordinasikan antar tim yaitu tim
development dengan tim operations dengan efektif dan efisien.Pola pikir yang dibentuk oleh
DevOps adalah koordinasi antar tim yang dapat dilakukan dengan cara singkat sehingga tidak
membutuhkan banyak pertanyaan. Tim operation atau development cukup mengonfigurasi
beberapa komponen yang dibutuhkan melalui prosedur yang dibuat. Tentunya koordinasi yang
diterapkan pada DevOps membutuhkan sebuah tools. Banyak tools yang bisa kamu gunakan,
salah satunya adalah Source Code Management.
(SCM) yang biasa digunakan secara umum oleh tim development. Produk SCM yang
paling terkenal adalah Git, ditemani oleh Source Code Repository(SCR) seperti GitHub,
GitLab, Bitbucket atau yang lainnya. Namun SCM saja tak cukup untuk mengomunikasikan
antara tim development dengan tim operational.
Agar tim operational dapat mengetahui permasalahan yang terjadi, biasanya akan
dihubungkan ke Product Management Software, seperti Jira. Melalui Product Management
Software, tim operation dapat mengetahui berbagai permasalahan yang terjadi pada
sistem/aplikasi. Sehingga antara pihak development dengan operational akan saling terhubung
satu sama lain.
DevOpsbertujuan untuk meningkatkan kolaborasi antara tim development dan tim
operation dari mulai perencanaan hingga aplikasi/fitur ter-deliverke pengguna. Semua itu harus
dilakukan secara otomatis agar:
1. Meningkatkan deployment frequency
2. Meningkatkan waktu pemasaran
3. Menurunkan tingkatkegagalan pada rilisan terbaru
4. Mempersingkat waktu perbaikan
5. Meningkatkan waktu pemulihan.
Melalui berbagai referensi, ternyata ada banyak alat bantu untuk menerapkan
DevOps yang harus kita ketahui
1. Source Code Management
Melalui sumber repository, antar developer dapat memeriksa dan mengubah kode
tanpa perlu saling menulis satu sama lainnya. Source controlini mungkin telah ada sejak 40
tahun yang lalu, tetapi ini merupakan komponen utama dari Continuous Integrationatau CI.
Adapun contoh produk yang berfungsi sebagai SCM yaitu Git, Subversion, Cloudforce,
Bitbucketdan TFS.
2. Build Server
Build Server adalah alat otomatisasi yang mengkompilasi kodedalam SCR (Source
Code Repository) ke dalam basis kodeyang dapat dieksekusi. Alat ini bisa kamu temukan
seperti Jenkins, SonarQubedan Artifactory.
3. Configuration Management
Manajemen konfigurasi berguna untuk menetapkan konfigurasi pada server atau
lingkungannya. Alat yang populer biasa kamu temukan seperti Puppet dan Chef.
4. Virtual Infrastructure
Amazon Web Servicesdan Microsoft Azureadalah contoh infrastruktur virtual.
Virtual Infrastructureini disediakan oleh vendor cloudyang menjual insrastruktur atau Platform
as a Service(PaaS). Infrastruktur ini memiliki API yang memungkinkan kamu membuat mesin
baru yang terprogram dengan alat manajemen konfigurasi. Ada juga privateclouddi mana
privateinfrastructure virtualmemungkinkan kamu menjalankan clouddi hardwaresebagai data
terpusat. Alat ini dikombinasikan dengan alat otomatisasi untuk memberdayakan organisasi
yang melatih DevOpsdengan kemampuan konfigurasi servertanpa jari di atas keyboard. Jika
ingin menguji kodebaru, cukup mengirimkan kodeke infrastruktur clouduntuk membangun
lingkungan. Kemudiantes dijalankan tanpa adanya campur tangan manusia.
5. Test Automation
Test automationsebenarnya sudah ada sejak lama. Pengujian yang diadopsi oleh
DevOpsberfokus pada pengujian otomatis melalui pipeline builduntuk memastikan bahwa
build deployable sudah dilakukan. Tools populer untuk tahapan ini adalah selenium dan air.
BAB III
ANALISIS DAN PERENCANAAN SISTEM
3.1 ANALISIS SISTEM
Penelitian ini diharapkan dapat menghasilkan sebuah aplikasi menggambar yang dapat
digunakan untuk semua kalangan, terutama anak-anak, dengan mudah dan efektif.
Kebutuhan system ialah sebagai berikut :
a. Aplikasi ini berbasis web yang akan digunakan pada browser.
b. Aplikasi akan terkoneksi ke server database melalui koneksi internet dari perangkat user.
3.2 METODE PENELITIAN
Teknik pengumpulan data yang digunakan dalam penelitian ini, sebagai berikut:
a. Observasi
Observasi merupakan teknik mendapatkan data primer dengan cara mengamati
langsung onyek datanya (Jogiyanto, 2008). Pada penelitian ini, observasi dilakukan
secara online untuk mengamati proses user menggambar dan hasil penggambaran user.
b. Wawancara
Wawancara adalah komunikasi dua arah untuk mendapatkan data daru responden
(Jogiyanto, 2008). Wawancara dilakukan untuk mengkonfirmasi data atau fakta yang
diperoleh pada saat observasi serta sekaligus untuk menggali software requirement dari
user. Wawancara dilakukan kepada user yang terlibat dalam proses menggambar
online.
c. Studi Pustaka
Studi pustaka dilakukan untuk mengumpulkan data dan informasi melalui
dokumen-dokumen baik dalam bentuk buku, jurnal, prosiding, laporan-laporan, atau
bentuk-bentuk lain dalam bentuk tercetak maupun digital. Studi pustaka akan semakin
kredibel apabila didukung oleh foto-foto atau karya tulis akademik dan seni yang telah
ada.
3.3 METODE PENGEMBANGAN SISTEM
Dalam penelitian ini menganalisa dan memaparkan bagaimana konsep penerapan metode
DevOps dalam pengembangan aplikasi menggambar berbasis web. Kami merancang aplikasi
dengan melakukan beberapa penelitian dengan menerapakan metode DevOps dalam
mengembangkan sistem aplikasi menggambar berbasis web yang kami buat.
Metode DevOps yang digunakan adalah sebagai berikut :
a. Plan (Perencanaan)
Pada tahap perencanaan, dilakukan proses identifikasi tujuan dan persyaratan untuk
merancang dan mengembangkan perangkat lunak.
Indentifikasi tujuan pada Aplikasi Menggambar Berbasis Web sebagai berikut :
Menghasilkan sebuah aplikasi menggambar untuk anak-anak.
Menghasilkan aplikasi menggambar yang dapat dengan mudah digunakan.
Perancangan dan pengembangan dibutuhkan:
Internet Browser
Perangkat lunak editor kode : Visual Code Studio
Database Management System : MySQL.
Bahasa Pemograman : PHP, HTML, JavaScript, dan CSS.
b. Develop
Berdasarkan pada tahapan sebelumnya, tim pengembang berfokus untuk
mengembangkan dan meninjau kode perangkat lunak. Kode aplikasi dikembangkan
dengan menggunakan Bahasa pemrograman PHP, HTML, javaScript, dan CSS.
c. Build
Pada tahap ini integrasi dari berbagai modul perangkat lunak dilakukan untuk
membuat file yang dapat dieksekusi untuk proses menggambar yang dikembangkan
sepenuhnya. Selain itu terdapat proses evaluasi untuk mengukur tingkat kesesuaian
hasil pengembangan perangkat lunak dengan persyaratan yang telah ditetapkan.
d. Test
Pada tahap ini pengujian otomasi dilakukan secara terus-menerus untuk memastikan
kualitas aplikasi menggambar yang telah dikembangkan. Tujuan lain dari pengujian
adalah untuk memastikan bahwa potensi kesalahan yang muncul di dalam aplikasi ini
telah dihilangkan dan untuk memastikan aplikasi berjalan dengan baik.
e. Deploy
Tahap ini berfokus pada penerapan ulang aplikasi secara terus-menerus. Jika fitur
pada aplikasi berhasil diterapkan, maka aplikasi siap dirilis.
f. Operate
Operasi dalam siklus DevOps berkaitan dengan konfigurasi dan pengelolaan aplikasi
menggambar setelah penerapan.
g. Monitor
Kinerja aplikasi menggambar yang diterapkan dipantau dengan mengumpulkan dan
menganalisis data penggunaan yang dapat membantu mendeteksi dan
mengidentifikasi pengecualian dan memberikan umpan balik untuk peningkatan
aplikasi secara berulang.
3.4 PERANCANGAN SISTEM
Perancangan system aplikasi menggambar berbasis web ini menggunakan DFD (Data
Flow Diagram) yang merupakan salah satu teknik pemodelan desain sistem berbasis web.
Pemodelan ini menjadi bagian penting dalam pengembangan sistem karena menjadi satu
satunya cara untuk memvisualisasikan desain sistem dan memeriksa apakah sudah memenuhi
standar yang diinginkan sebelum memulai coding. Beberapa jenis Diagram yang dibuat antara
lain yaitu Diagram koneks, DFD dan ERD.
a. Diagram Jenjang
Diagram Jenjang merupakan desain dan teknik dokumentasi dalam siklus
pengembangan system. Dengan tujuan dapat memberikan informasi berupa diagram tang
terstruktur menampilkan semua proses dalam system.
b. Diagram Level 0 (Diagram Konteks)
Diagram konteks atau level 0 merupakan diagram dengan tingkatan paling rendah, dimana
menggambarkan sistem berinteraksi dengan entitas eksternal. Pada diagram konteks akan
diberi nomor untuk setiap proses yang berjalan, dimulai dari angka 0 terlebih dahulu.
c. Diagram Level 1
DFD level 1 merupakan lanjutan dari diagram konteks, dimana setiap proses yang
berjalan akan diperinci pada tingkatan ini. Sehingga, proses utama akan dipecah menjadi
sub sub proses yang lebih kecil lagi.
d. Diagram level 2
DFD level 2 merupakan tingkat lanjutan dari level yang sebelumnya, dimana pada fase ini
akan dijelaskan lebih detail terkait tiap prosesnya.
DFD Level 2 Master Data
DFD Level 2 Proses Menggambar
e. ERD
(Entity Relationship Diagram) atau diagram hubungan entitas adalah diagram yang
digunakan untuk perancangan suatu database dan menunjukan relasi antar objek atau
entitas beserta atribut-atributnya secara detail.
3.7 PERANCANGAN DATABASE
3.7 DESAIN INTERFACE
3.7.1 Landing Page
3.7.2 Halaman Login
3.7.3 Halaman Daftar
3.7.4 Home
3.7.5 Halaman Menggambar
3.7.6 Daftar Gambar User
3.7.7
Hapus
Daftar
Gambar User
3.7.8 Daftar Nama User pada Admin
3.7.9 Daftar Gambar User pada Admin
3.7.10 Daftar Gambar User yang sudah dihapus oleh Admin
BAB IV
IMPLEMENTASI
4.1 Landing Page dan Source Code
Landing page pada halaman browser akan menampilkan halaman utama atau disebut juga halaman
beranda.dapat dilihat pada gambar dibawah ini:
<html>
<head>
<title>aplikasi Drawpen</title>
<style>
h1{
color: aliceblue;
text-align: center;
font-size: 160px;
text-indent: 200px;
}
h2{
color: aliceblue;
text-align: center;
font-size: 30px;
text-indent: 400px;
}
.login1{
color: rgb(255, 255, 255);
text-align:end;
margin-left:1200px;
font-size: 50px;
}
body{
background-image:url("gambar.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body >
<br>
<a class="login1" href="login.html">LOGIN</a>
<br>
<h1>Drawing</h1>
<h2>Easy Online to Draw and Painting</h2>
</body>
</html>
4.2 Halaman Login dan Source Code
Halaman Login Sebelum Masuk Kehalaman Mengambar Pengguna Diminta Untuk
Melakukan Login Dengan Mengisikan e-mail or username dan password.
<table class="tabel" align="center" style="border-radius: 15px; background-
color: rgb(75, 159, 233);" cellspacing="15">
<tr class="trt1" height="50px" bgcolor="#E0FFFF">
<td colspan="2" align="center" style="color: #2412b0">
<h3>LOGIN</h3></td>
</tr>
<tr>
<td>e-mail or username:</td>
<td>:
<input name="e-mail" id="NPM" type="text"
placeholder="masukkan e-mail" maxlength="10" required>
</td>
</tr>
<tr>
<td>Password</td>
<td>:
<input name="Password" id="Password" type="password"
placeholder="masukkan Password ">
</td>
</tr>
<tr>
<td><a href="home.html">LOGIN ADMIN</a></td>
<td><a href="home.html">LOGIN</a></td>
<td><a href="daftar.html">DAFTAR</a></td>
</tr>
</table>
4.3 Halaman Daftar dan Source Code
Sebelum menggunakan aplikasi,calon pengguna harus melakukan pendaftaran dengan
mengisikan e-mail,username,dan password.seperti pada gambar di bawah ini:
<table
class="tabel" align="center" style="border-radius: 15px; background-color: rgb(75, 159, 233);"
cellspacing="15">
<tr class="trt1" height="50px" bgcolor="#E0FFFF">
<td colspan="2" align="center" style="color: #2412b0"> <h3>DAFTAR</h3></td>
</tr>
<tr>
<td>e-mail</td>
<td>:
<input name="e-mail" id="NPM" type="text" placeholder="masukkan e-mail"
maxlength="10" required>
</td>
</tr>
<tr>
<td>username:</td>
<td>:
<input name="e-mail" id="NPM" type="text" placeholder="masukkan username"
maxlength="10" required>
</td>
</tr>
<tr>
<td>Password</td>
<td>:
<input name="Password" id="Password" type="password" placeholder="masukkan
Password ">
</td>
</tr>
<tr>
<td><a href="home.html">DAFTAR</a></td>
</tr>
</ta
4.4 Home dan Sorce Code
Tampilan Home terdiri dari:
1. Buat gambar
2. Daftar gambar
Berikut adalah tampilan Home pada aplikasi menggamba:
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>Home</title>
<style>
h1{
color: rgb(3, 28, 69);
font-size: 90px;
margin-top: 200px;
}
h6{
color: rgb(3, 28, 69);
font-size: 40px;
margin-top: 110px;
}
body{
background-image:url("444.png");
background-repeat: no-repeat;
background-size: cover;
}
table{
margin-left: 1250px;
}
.button12 {
background-color: #722ec0; /* Green */
border: none;
color: white;
padding: 20px 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 10px;
width: 70%;
}
.button1{
margin-top: 100px;
}
.a1{
margin-top: 70px;
}
</style>
</head>
<body>
<table border="0">
<tr>
<td><h1>Drawpen</h1></td>
</tr>
<tr>
<td><a href="drawing/index.html" type="button" class="a1 btn btn-lg button12">BUAT
GAMBAR</a></td>
</tr>
<tr>
<td><a href="daftar_gambar_user.html" type="button" class="btn btn-lg
button12">DAFTAR GAMBAR</a></td>
</tr>
<tr>
<td><h6>Easy Online to Draw and Painting</h6></td>
</tr>
</table>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
4.5 Halaman Menggambar dan Source Code
Pada halaman ini pengguna sudah dapat menggambar dengan mengekspresikan semuan idenya dengan bebas .
Menggambar atau ilustrasi merupakan kegiatan menggambar yang bertujuan untuk memperjelas ide cerita atau
narasi, dimana tujuan utamanya adalah untuk memperkuat, memperjelas, memperindah, dan mempertegas cerita
tersebut.
<html>
<head>
<meta charset="utf-8">
<title>Membuat Aplikasi Menggambar dengan JavaScript</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
<!--jQuery UI south-street theme(green)-->
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css">
<!--custom style-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--title-->
<div id="header">Aplikasi Menggambar</div>
<!--input-->
<div class="inputContainer" >
<!--color-->
<div class="input" id="colorInput">
<input type="color" list id="paintColor">
</div>
<!--line thickeness-->
<div class="input" id="thickenessInput">
<div id="circle"></div>
</div>
<!--slider-->
<div class="input">
<div id="slider"></div>
</div>
</div>
<!--canvas-->
<div id="canvasContainer">
<canvas id="paint" width="1000px" height="400px"></canvas>
</div>
<!-- buttons-->
<div class="btnContainer">
<!--Erase button -->
<div class="btnInput">
<span id="erase" class="button">Hapus</span>
</div>
<!--Save button -->
<div class="btnInput">
<a href="../daftar_gambar_user.html" id="save" class="button">Simpan</a>
</div>
<!--Reset button -->
<div class="btnInput">
<span id="reset" class="button">Ulangi</span>
</div>
</div>
4.6 Daftar Gambar dan Source Code
Pada daftar gambar pengguna dapat melihat hasil gambaran yang sudah di buat pengguna
juga dapat menghapus gambar seperti pada gambar dibawah ini:
<title>Daftar Gambar</title>
</head>
<body>
<div class="container-fluid">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="text-muted" href="#"></a>
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#"></a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
</div>
</div>
</header>
<div class="p-3 p-md-5">
<div class="col-md-6 px-0">
<h1 class="display-4 font-italic">DAFTAR GAMBAR</h1>
</div>
</div>
<div class="row mb-2">
<div class="col-md-8 p-3">
<div class="card mb-4 box-shadow h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<table class="table" style="color: black;">
<tbody>
<tr>
<th scope="row"><span class="dot"></th>
<td>GAMBAR 1</td>
<td><button type="button" class="btn btn-primary btn-lg circle-
btn">HAPUS </button></td>
</tr>
<tr>
<th scope="row"><span class="dot"></th>
<td>GAMBAR 2</td>
<td><button type="button" class="btn btn-primary btn-lg circle-
btn">HAPUS</button></td>
</tr>
<tr>
<th scope="row"><span class="dot"></th>
<td>GAMBAR 3</td>
<td><a href="hapus_gambar_user.html" type="button" class="btn btn-
primary btn-lg circle-btn">HAPUS</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-4">
<h1 class="top-mr">DRAWPEN</H1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="login.html" type="button" class="btn btn-lg circle-btn logout-
btn">LOGOUT</a>
</div>
4.7 Daftar Gambar sesudah delete dan Source Code
Dibawah ini adalah tampilan aplikasi menggambar yang sudah dihapus:
<div class="p-3 p-md-5">
<div class="col-md-6 px-0">
<h1 class="display-4 font-italic">DAFTAR GAMBAR</h1>
</div>
</div>
<div class="row mb-2">
<div class="col-md-8 p-3">
<div class="card mb-4 box-shadow h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<table class="table" style="color: black;">
<tbody>
<tr>
<th scope="row"><span class="dot"></th>
<td>GAMBAR 1</td>
<td><button type="button" class="btn btn-primary btn-lg circle-
btn">HAPUS </button></td>
</tr>
<tr>
<th scope="row"><span class="dot"></th>
<td>GAMBAR 2</td>
<td><button type="button" class="btn btn-primary btn-lg circle-
btn">HAPUS</button></td>
</tr>
<tr>